<template>
	<view class="bottom">
		<view class="nav-box">
			<view class="nav-tab" :class="{'nav-tab-active':index===0}" @click="handelSwitchTab(0)">
				<uni-icons type="home" size="30"></uni-icons>
			</view>
			<view class="nav-tab" :class="{'nav-tab-active':index===1}" @click="handelSwitchTab(1)">
				<uni-icons type="vip" size="30">
				</uni-icons>
			</view>
			<view class="nav-tab" :class="{'nav-tab-active':index===2}" @click="handelSwitchTab(2)">
				<uni-icons type="person" size="30"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handelSwitchTab(index) {
				if (index === 0) {
					uni.switchTab({
						url: '/pages/photo/list/list'
					})
				} else if (index == 1) {
					uni.switchTab({
						url: '/pages/photo/index'
					})
				} else if (index == 2) {
					uni.switchTab({
						url: '/pages/photo/user/index'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 65rpx;
		z-index: 6;
		display: flex;
		align-items: center;
		box-shadow: 0 0px 8px 0px rgba(0, 0, 0, 0.2);
		background: rgba(255, 255, 255, 0.2);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);

		.nav-box {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			width: 375rpx;
			height: 100%;
			box-sizing: border-box;
			padding: 12rpx 0;

			.nav-tab {
				border-radius: 50%;
				width: 88rpx;
				height: 88rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				transition: .5s;
				box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.25);
			}

			.nav-tab-active {
				box-shadow: inset 3px 2px 5px rgba(255, 255, 255, 0.25);
				background: #6b76ec;
			}
		}
	}
</style>
